<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>年龄段统计</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
		<%@ include file="/WEB-INF/jspf/statics.jspf" %>
	</head>
	<body>
		<%@include file="/WEB-INF/pages/common/header.jsp" %>
		<%@include file="/WEB-INF/pages/common/menu.jsp" %>
		<div id="rightqqqq" style="border-left-style:groove ;float:left;width:88%;height:10px;margin-left:4px;min-height:80%;overflow-y:auto; overflow-x:hidden; ">
				<div id="navContainer" class="navC mb10" style="margin:10px 0px;">  
		        <ul>  
		            <li><a hidefocus="true" style="font-size:18px;">游客年龄分布</a></li>  
		        </ul>  
   			 </div>  
				<div style="height:88%;" class="containerStyle">
					<div id="container"
						style="min-width: 250px; height:100%; margin: 0 auto"></div>
				</div>
				<div class="testaa" style="width:99%;height:10px;"></div>
		</div>
	</body>
</html>
<script src="<%=basePath%>/js/highcharts/highcharts.js"></script>
<script src="<%=basePath%>/js/highcharts/modules/data.js"></script>
<script src="<%=basePath%>/js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript">
$().ready(function(){
	$('#navigation').accordion({
			header: '.head',
			navigation1: true, 
			event: 'click',
			fillSpace: true,
			active:1,
			animated: 'bounceslide'
	});
	$("a[class='actived']").removeAttr("class");
	$("#age").attr("class", "actived");
});
  $(function () {
    var chart = {
        chart:{
            renderTo:'container',
            type:'bar' 
        },
        title:{
            text:'游客年龄分布图' 
        },
        xAxis:{
            categories: ['70岁及以上', '51-60岁', '41-50岁', '31-40岁', '21-30岁','11-20岁','10岁及以下','总参观人数']
        },
        yAxis:{
            title:{
                text:'人数' //Y轴的名称
            },
        }, 
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}'
                }
            }
        },
        tooltip: {
           // pointFormat: '<span>占比</span>: <b>{point.y:.2f}%</b><br/>'
        },
        series:[{
            name:"",
            data:[]
        },{
            name:"",
            data:[]
        },{
            name:"",
            data:[]
        }]
    };
  
    var color = ["gray","pink","red","blue","yellow","green","#fff"];
    $.ajax({
        type:'post',
        url:'${ctx }/visitor/statistics/chart/age',
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success:function(data){
            var json = eval("("+data+")");
           	chart.series=json;
            new Highcharts.Chart(chart);		
        },
        error:function(e){
        } 
    });
    
});

</script>